<template>
    <view class="walletPage" :style="{ background: pageBg, backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
        <view class="navbarBox">
            <u-status-bar></u-status-bar>
            <!-- 自定义导航栏 -->
            <view class="custom-navbar">
                <view class="back-button" @click="goBack">
                    <u-icon name="arrow-left" color="#FFF" size="24"></u-icon>
                </view>
                <view class="pageTitle">我的钱包</view>
            </view>
        </view>
        
		<view class="myWallet">
		    <view class="title">
		        我的钱包
		    </view>
            <view class="money">
                10000.00
            </view>
		</view>
        <view class="tx" @tap="toTx">
            提现
        </view>
        <!-- 添加客服 -->
        <customerService :show.sync="showCustomerService" />
	</view>
</template>

<script>
    import { customerService } from '@/components/customerService.vue'
	export default {
        components: {
            customerService
        },
		data() {
			return {
                pageBg: '',
                
                showCustomerService: false,
			}
		},
		async created() {
			this.pageBg = `url(${await this.toBase64('/static/img/walletBg.png')}) #F5F5F5`;
		},
		methods: {
			toTx() {
                this.showCustomerService = true
            }
        }
	}
</script>

<style lang="scss" scoped>
    .walletPage {
        height: 100vh;
        padding: 0 30rpx;
        font-family: Roboto, Roboto;
        
        .navbarBox {
            .custom-navbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20rpx;
                height: 44px;
                background-color: transparent;
                color: $uni-text-color-inverse;
                .back-button {
                    display: flex;
                    align-items: center;
                }
                
                .pageTitle {
                    font-size: 32rpx;
                    font-weight: bold;
                    text-align: center;
                    flex: 1;
                }
            }
        }
        
        .myWallet {
            margin-top: 30rpx;
            padding: 50rpx 40rpx;
            background-color: #FFFFFF;
            border-radius: $uni-border-radius-llg;
            .title {
                font-size: 26rpx;
            }
            .money {
                font-weight: 500;
                font-size: 48rpx;
                line-height: 100rpx;
            }
        }
        .tx {
            margin-top: 110rpx;
            width: 100%;
            height: 110rpx;
            background: $uni-bg-color-btn;
            font-size: 32rpx;
            color: $uni-text-color-inverse;
            border-radius: 110rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>
